<template>
	<view>
		<!-- 未绑定账号 -->
		<view class="card between" v-if="cardList==0">
			<view>提现到</view>
			<view class="go flex-center" @click="onSkip(`/package/mine/accountManagement/addAccount`)">去绑定<image
					class="rightArrow" src="https://wx.2024csnl.com/static/mine/rightArrow.png"></image>
			</view>
		</view>
		<!-- 已绑定账号 -->
		<view class="card between" v-if="cardList!=0">
			<view>提现到</view>
			<view class="flex-center" style="font-weight: 500;color: #666;" @click="open('popup')">
				{{cardList[current].name}}
				<image class="rightArrow" src="https://wx.2024csnl.com/static/mine/rightArrow.png"></image>
			</view>
		</view>
		<view class="card">
			<view>{{pageType=='余额提现'?'提现金额':'提现余额'}} </view>
			<view class="flex inputBox">
				<view class="icon flex-center">{{pageType=='余额提现'?'￥':''}} </view><input
					:placeholder="`可提现：￥${totalMoney}`" type="digit" placeholder-style="color:#CCCCCC;font-weight:500"
					v-model="money" />
			</view>
			<view class="flex-center">
				<view class="subBtn flex-center" @click="onSub()">确认提现</view>
			</view>
		</view>

		<view class="tit" style="padding: 40rpx 20rpx;">提现明细</view>
		<view class="detailsBox">
			<view class="between oneList" v-for="(item,i) in list">
				<view>
					<view>{{item.ordernum}}</view>
					<view v-if="item.paytype=='支付宝'">{{item.paytype}}:{{item.aliaccount}}</view>
					<view v-if="item.paytype=='银行卡'">{{item.paytype}}:{{item.bankcardnum}}</view>
					<view class="time" style="color: #999;">{{item.createtime}}</view>
					<view style="color: #FC2E30;" v-if="item.reason">驳回原因: {{item.reason}}</view>
				</view>
				<view>
					<view class="score" style="color: #FC2E30;">
						{{item.status==0?'待审核':item.status==1?'已审核':item.status==2?'已驳回':'已打款'}}</view>
					<view class="score" style="color: #999;">提现金额{{item.txmoney}}</view>
					<view class="score" style="color: #999;">打款金额{{item.money}}</view>
				</view>
			</view>
			<view class="flex-center addressImgBox" style="flex-direction: column;" v-if="list.length==0">
				<image src="https://wx.2024csnl.com/static/noData.png"></image>
				暂无数据~
			</view>
			<!-- reason是驳回信息 -->
			<!-- status=0待审核1已审核2已驳回3已打款 -->
			<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>
		</view>

		<uni-popup ref="popup" type="bottom">
			<view class="popBox">
				<view class="titBox flex-center">
					选择提现账号
					<image src="https://wx.2024csnl.com/static/goods/detail-close.png"></image>
				</view>
				<view class="listBigBox">
					<radio-group style="font-size: 27rpx;color: #333;margin: 20rpx;" @change="radioChange">
						<label class="select between" v-for="(item,i) in cardList">
							<view class="flex-center">
								<image v-if="item.type=='支付宝'" src="https://wx.2024csnl.com/static/mine/zhifubao.png"></image>
								<image v-if="item.type=='银行卡'" src="https://wx.2024csnl.com/static/business/card.png"></image>
								{{item.account}}
							</view>
							<radio :value="item.value" :checked="current==i" color="#41644A" />
						</label>
					</radio-group>
					<view class="between goList" @click="onAdd()">
						<view class="flex">
							<image class="goIcon" src="https://wx.2024csnl.com/static/business/bag.png"></image>
							添加新账号
						</view>
						<view class="rightGoIconBox">
							<image class="" src="https://wx.2024csnl.com/static/mine/rightArrow.png"></image>
						</view>
					</view>
				</view>

			</view>
		</uni-popup>

		<pay-keyboard :show_key="show_pay_keyboard" @hideFun="hidePayKeyboard" :show_forget="true"
			@getPassword="getPayPassword"></pay-keyboard>
	</view>
</template>

<script>
	import {
		getAccount,
		setWithdrawDeposit,
		withdrawDepositDetails,
		checkpaypwdRequest
	} from "@/api/index.js"
	export default {
		data() {
			return {
				show_pay_keyboard: false,
				payPassword: '',
				noMoreData: false,
				pagenum: 1,
				list: [],
				cardList: [], //收款账户
				money: '', //提现金额
				totalMoney: '',
				current: 0, //单选i
				bid: '',
			}
		},
		onLoad(opt) {
			this.bid = opt.bid
			this.pageType = opt.pageType
			this.setNavTitle('余额提现')
			this.getWithdrawDepositDetails()
		},
		onShow() {
			this.getAccount()
		},
		onReachBottom() {
			this.pagenum += 1
			// console.log('触底了---',this.pagenum)
			this.getWithdrawDepositDetails('bottom')
		},
		methods: {
			async showPayKeyboard() {
				this.show_pay_keyboard = true
			},
			hidePayKeyboard() {
				this.show_pay_keyboard = false
			},
			async getPayPassword(n) {
				console.log("用户输入的密码", n)
				this.payPassword = n.password;
				this.show_pay_keyboard = false
			
				const res = await checkpaypwdRequest('s=/ApiMy/checkpaypwd', {
					paypwd: this.payPassword
				})
				const {
					id,
					status,
					msg
				} = res.data
			
				if (status == 1) {
					await this.onSetWithdrawDeposit()
				} else {
					this.showToast(msg)
				}
			},
			async getWithdrawDepositDetails(type) {
				const res = await withdrawDepositDetails(`s=/ApiBusiness/withdrawlog`, {
					pagenum: this.pagenum,
					bid: this.bid
				})
				const {
					status,
					data,
					msg
				} = res.data
				if (status == 1) {
					type == 'bottom' ? this.list.push(...data) : this.list = data
					this.pagenum != 1 && data.length == 0 ? this.noMoreData = true : this.noMoreData = false
					console.log(res, 'oooo---', this.list)
				} else {
					this.showToast(msg)
				}
			},
			// 提现
			async onSetWithdrawDeposit() {
				const res = await getAccount(`s=/ApiBusiness/tixian`, {
					bid: this.bid,
					value: this.money,
					type: this.pageType == '余额提现' ? 1 : 0,
					id: this.cardList[this.current].value
				})
				const {
					status,
					msg
				} = res.data
				this.showToast(msg)
				if (status == 1) {
					console.log(res, 'oooo')
					this.goBack(2000)
				}
			},
			// 添加账号
			onAdd() {
				this.close('popup')
				this.onSkip(`/package/mine/accountManagement/addAccount`)
			},
			onSub() {
				if (this.cardList.length == 0) {
					return this.showToast('请先绑定提现账号~')
				}
				if (!this.money) {
					return this.showToast('请输入提现金额~')
				}
				if (this.money > Number(this.totalMoney)) {
					return this.showToast(`最多可提现${this.totalMoney}`)
				}
				this.showPayKeyboard()

			},
			// 提现数据
			async getAccount() {
				const res = await getAccount(`s=/ApiBusiness/getaccount&bid=${this.bid?this.bid:''}`)
				const {
					status,
					data,
					info,
					msg
				} = res.data
				if (status == 1) {
					this.cardList = data.map((item, i) => {
						let val = item.id.toString()
						return {
							...item,
							value: val,
							name: item.type
						}
					})
					this.pageType == '余额提现' ? this.totalMoney = info.money : this.totalMoney = info.score

				} else {
					this.showToast(msg)
				}
			},
			radioChange(e) {
				this.cardList.forEach((item, i) => {
					if (item.value == e.detail.value) {
						this.current = i;
					}
				})
				this.close('popup')
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},

		}
	}
</script>

<style>
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.oneList {
		line-height: 50rpx;
		margin-bottom: 20rpx;
		background: #fff;
		padding: 27rpx 30rpx;
		font-size: 28rpx;
	}

	.myBalance {
		height: 100vh;
		background: rgb(247, 247, 247);
		padding: 30rpx 30rpx 0;

		.detailsBox {
			// height: calc(100vh - 26vh);
			// overflow: auto;



			.time {
				color: #999;
				font-size: 26rpx;
				margin-top: 20rpx;
			}

			.score {
				margin-top: 20rpx;
				font-size: 30rpx;
			}
		}

		.topBox {
			position: relative;
			font-size: 30rpx;
			color: #fff;

			.bgImg {
				width: 100%;
				height: 320rpx;
			}

			.topMsg {
				position: absolute;
				top: 104rpx;
				margin-left: 67rpx;
				width: 92vw;
			}

			.moneyBox {
				font-size: 54rpx;
				margin-top: 32rpx;
				font-weight: bold;

				text {
					font-size: 30rpx;
					margin-right: 5rpx;
				}


			}
		}

		.tit {
			font-size: 30rpx;
			color: #333;
			margin: 32rpx 0 28rpx;
			padding: 0 20rpx;
		}
	}

	.popBox {
		padding: 40rpx 50rpx;
		font-size: 30rpx;
		background: #fff;
		border-radius: 40rpx 40rpx 0px 0px;

		.listBigBox {
			max-height: 30vh;
			overflow: auto;

			.select {
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 1px solid #F5F5F5;

				image {
					width: 65rpx;
					height: 65rpx;
					margin-right: 33rpx;
				}

			}
		}

		.listBigBox::-webkit-scrollbar {
			display: none;
		}

		.goList {
			padding: 30rpx 20rpx;
			border-bottom: 1px solid #f5f5f5;
		}

		.goIcon {
			width: 54rpx;
			height: 43rpx;
			margin-right: 30rpx;
		}

		.rightGoIconBox {
			image {
				width: 17rpx;
				height: 30rpx;
			}
		}



		.titBox {
			position: relative;

			image {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				right: 0;
				top: 0;

			}
		}
	}

	.selectData {
		font-size: 30rpx;
		color: #999999;
		width: 400rpx;
		font-weight: 500;
	}

	.inputBox {
		margin: 80rpx 0;
		height: 90rpx;
		border-bottom: 1px solid #F5F5F5;

		.icon {
			font-size: 48rpx;
			font-weight: 700;
			margin-right: 30rpx;
		}

		input {
			height: 90rpx;
			line-height: 90rpx;
		}
	}

	.subBtn {
		background: #41644A;
		border-radius: 65rpx;
		width: 500rpx;
		padding: 30rpx 0;
		color: #fff;
		margin-bottom: 20rpx;
	}

	.card {
		margin: 30rpx;
		padding: 30rpx;
		background: #fff;
		border-radius: 30rpx;
		color: #333333;
		font-weight: 600;
		font-size: 30rpx;
	}

	.rightArrow {
		width: 16rpx;
		height: 30rpx;
		margin-left: 10rpx;
	}

	.go {

		color: #41644A;
	}
</style>